import React, { lazy, Suspense } from 'react';
import BlankLayout from '../layouts/BlankLayout';
import { Redirect, Link } from 'react-router-dom';
import Tabbuttom from '../components/tabbuttom/Tabbuttom';

const Detail = lazy(() => import('../pages/details/Detail'))
const Main = lazy(() => import('../pages/Main/Main'));
const Classify = lazy(() => import('../pages/classify/Classify.jsx'))
const Shopcar = lazy(() => import('../pages/shopcar/Shopcar'))
const Person = lazy(() => import('../pages/person/Person'))


const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={null}>
            <Component {...props}></Component>
        </Suspense>
    )
}

export default [{
    component: BlankLayout,
    routes:[
        {
            path:'/',
            exact: true,
            render: () => < Redirect to = { "/home" }/>,
        },
        {
            path:'/home',
            component: Tabbuttom,
            routes: [
                {
                    path: '/home',
                    exact: true,
                    render: () => < Redirect to = { "/home/main" }
                    />,
                },
                {
                    path: '/home/main',
                    component: SuspenseComponent(Main),
                },
                {
                    path: '/home/classify',
                    component: SuspenseComponent(Classify),
                },
                {
                    path: '/home/shopcar',
                    component: SuspenseComponent(Shopcar),
                },
                {
                    path: '/home/person',
                    component: SuspenseComponent(Person),
                },
            ]
        },
        {
            path: '/detail',
            component: SuspenseComponent(Detail),     
            routes: [
                {
                    path: '/detail/:id',
                    component: SuspenseComponent(Detail)
                }
            ]
        }
    ]
}]